<template>
    <div class="login-wrapper">
        <el-form
            size="large"
            class="login-content-form"
            :model="formData"
            :rules="rules"
            ref="formRef"
            label-width="80px"
        >
            <el-form-item prop="username" label="用户名：">
                <el-input
                    type="text"
                    placeholder="请输入 “user” or “admin” "
                    v-model.trim="formData.username"
                    clearable
                    autocomplete="off"
                >
                </el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码：">
                <el-input
                    class="password-input"
                    :type="isShowPassword ? 'text' : 'password'"
                    placeholder="密码"
                    v-model.trim="formData.password"
                    autocomplete="off"
                >
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    class="login-content-submit"
                    @click="clickLogin"
                >
                    <span>登录</span>
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";

import useUserStore from "@/stores/userStore";
import { useRouter } from "vue-router";
const userStoreData = useUserStore();
const router = useRouter();
const formData = ref({
    username: "",
    password: "",
});
const rules = ref({
    username: [
        {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
        },
    ],
    password: [
        {
            required: true,
            message: "请输入密码",
            trigger: "blur",
        },
    ],
});
const formRef = ref();
const isShowPassword = ref(false);
const clickLogin = () => {
    formRef.value.validate((valid: boolean) => {
        if (valid) {
            console.log("登录成功");
            const { username } = formData.value;
            let roleList = [];
            if (username == "user") {
                roleList = ["user"];
            } else if (username == "admin") {
                roleList = ["admin"];
            } else {
                ElMessage.error("用户名错误");
                return;
            }
            localStorage.setItem("ACCESS_TOKEN", "accessToken");
            userStoreData.setRoles(roleList);
            userStoreData.setMenus(["menu1", "menu2"]);
            setTimeout(() => {
                router.push({ path: "/" });
            }, 500);
        }
    });
};
</script>

<style lang="less" scoped>
.login-wrapper {
    width: 370px;
    height: 242px;
    transform: translateY(100%);
    margin: 0 auto;
    padding: 30px 40px 10px 30px;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 21px 41px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    .login-content-submit {
        width: 100%;
    }
    .password-input {
        margin: 8px 0;
    }
}
</style>
